<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>商品详情</title>

    <link rel="stylesheet" href="__HOMECSS__/style.css">
    <script src="__HOMEJS__/jquery-1.7.2.min.js"></script>
</head>
<script src="__HOMEJS__/my.js"></script>
<script>
    $(function(){
        window.onload = function(){
            shop_cart.init();
        }
        var shop_cart ={

            init:function(){
                this.choseNum();
            },
            choseNum:function () {
                $(".cut").click(function(){
                    var num =parseInt($(this).parents(".chosenum1").find("input").val());
                    if(num > 0){
                        num --;
                    }
                    $(this).parents(".chosenum1").find("input").val(num);
                })
                $(".add").click(function(){
                    var num =parseInt($(this).parents(".chosenum1").find("input").val());
                    num ++;
                    $(this).parents(".chosenum1").find("input").val(num);
                })
            },
        }


        $(".pro_top li").click(function () {
            $(".pro_top span").removeClass('redborder')
            $(this).find("span").addClass("redborder")
        })
        $(".cate_parameter").click(function () {
            $(".product_parameter").css('display','block')
            $("body").css('overflow-y','hidden')
        })
        $(".share_window_bg").click(function () {
            $(".share_window").css('display','none')
            $(".product_parameter").css('display','none')
            $(".cate_specification").css('display','none')
            $("body").css('overflow-y','auto')
        })
        $(".colse").click(function () {
            $(".share_window").css('display','none')
            $(".product_parameter").css('display','none')
            $(".cate_specification").css('display','none')
            $("body").css('overflow-y','auto')
        })
    })
</script>
<body style="padding-bottom: 80px;">

<style>
    .choseNum{
        position: relative;
        margin:5px auto;
    }
    .quantityBox{
        overflow: hidden;

    }
    .choseNum .cut{
        width:40px;
        height:30px;
        line-height:30px;
        text-align: center;
        background-color: #efefef;
        display: inline-block;
        border:1px solid #cccccc;
        float:right;
        border-right-width:0px;
    }
    .choseNum .add{
        width:40px;
        height:30px;
        line-height:30px;
        text-align: center;
        background-color: #efefef;
        display: inline-block;
        border:1px solid #cccccc;
        float:right;
        border-left-width:0px;
    }
    .choseNum input{
        width:30%;
        height:30px;
        line-height:30px;
        text-align: center;
        color:#bf1e2e;
        float:right;
        border:1px solid #cccccc;
    }
    .choseNum .pro_quantity{
        float:left;
        margin-right:10px;
        line-height: 30px;
        display: inline-block;
    }
    .clear{
        clear: both;
    }
    .pieces{
        text-align: right;
        line-height:30px;
    }
    .pieces span{
        color:#bf1e2e;
    }
</style>

<div class="pro_img">
    <a href="javascript:history.go(-1)" class="fanhui"><img src="__HOMEIMG__/product_list_fan_03.png" alt="" ></a>
    <ul class="pro_righttop">


    </ul>
    <!--<img src="__HOMEIMG__/produnt_02.png" alt="">-->
    <!--轮播图-->
    <div id="scrollimg" class="scrollimg">
        <div class="bd">
            <ul>
                {foreach name="images" item="item"}
                    <li><a href="#"><img src="{$item.image}" width="100%" /></a></li>
                {/foreach}
            </ul>
        </div>
        <div class="hd">
            <ul></ul>
        </div>
    </div>
    <script type="text/javascript">
        TouchSlide({
            slideCell:"#scrollimg",
            titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
            mainCell:".bd ul",
            effect:"leftLoop",
            autoPage:true,//自动分页
            autoPlay:true //自动播放
        });
    </script>
</div>
<div class="category_price">
    <p class="pro_h2">{$goods.goods_name}</p>
    <div class="price">¥ <span>{$isVip > 0 ? $goods['vip_price'] : $goods['price']}</span></div>
    <ul class="cate_express">
        <!--<li>-->
        <!--<span><img src="__HOMEIMG__/productlist_icon_11.png" alt="" width="100%"></span>-->
        <!--快递：20元-->
        <!--</li>-->
        <li style="float: left;">
            <span style="width: 24px;"><img src="__HOMEIMG__/productlist_icon_13.png" alt="" width="100%"></span>
            销量{$goods.sales_sum}件
        </li>
    </ul>
</div>


<div>

</div>
<!--规格数量-->
<div class="cate_specification">
    <div class="share_window_bg"></div>
    <div class="sharewindow_content product_parameter_content">
        <form id="goodsForm">
            <div class="specification_top">
                <div>
                    <div class="content_img">
                        <img src="{$goods.image}" alt="" width="100%">
                    </div>
                    <div>
                        <p style="color: red;font-size: 16px;font-weight: bold;">¥ <span id="goods_price">{$isVip > 0 ? $goods['vip_price'] : $goods['price']}</span></p>
                        <p style="display:none">已选：<span id="attr_str">500g</span></p>
                    </div>
                </div>
                <span class="colse"><img src="__HOMEIMG__/spare_03.png" alt="" width="100%"></span>
            </div>

            <input type="hidden" value="{$goods.id}" name="goods_id"/>

            {foreach name="attrs" item="item" key="key"}
                <div class="specification_size">
                    <h3>{$key}</h3>
                    <ul class="specification_sizeul">
                        {foreach name="item" item="attr"}
                            <li class="goods_attr">{$attr.value}<input type="checkbox" name="attr_key[]" value="{$attr.item_id}" style="display: none"></li>
                        {/foreach}
                    </ul>
                </div>
            {/foreach}

            <div class="confirm_quantity specification_quantity">
                <span class="quantity">购买数量</span>
                <div class="chosenum1" style="display: block;">
                    <span class="cut">-</span>
                    <input type="text" value="1" name="num">
                    <span class="add">+</span>
                    <div class="clear"></div>
                </div>
            </div>
            <p id="queueNumber" style="display:none"></p>
            <div class="specification_ye">
                <p id="confirm">确定</p>
            </div>
        </form>
    </div>


</div>



<div class="pro_top">
    <li><span class="redborder">商品详情</span></li>

</div>
<style>
    .pro_bottom img{
        width:100%;
    }
</style>
<ul class="pro_bottom">
    <li>
        {$goods.content|htmlspecialchars_decode}
    </li>
    <li style="display:none;">

    </li>
</ul>

<div class="pro_buyadd">
    <div class="icon">
        <a href="#" style="display: block">
            <i><img src="__HOMEIMG__/productlist_icon_31.png" alt="" width="100%"></i>
            <p>客服</p>
        </a>
    </div>
    <div class="icon">
        <a href="{:Url('Cart/index')}" style="display: block">
            <i><img src="__HOMEIMG__/productlist_icon_32.png" alt="" width="100%"></i>
            <p>购物车</p>
        </a>
    </div>
    <div class="the_same " data-type="1">加入购物车</div>
    <div class="the_same buynow" data-type="2">立即购买</div>
</div>
</body>
</html>
<script src="__PUBLIC__/layer/layer.js"></script>
<script>

    var buyType = 1;
    $(".the_same ").click(function () {
        buyType = $(this).data('type');
        $(".cate_specification").css('display','block')
        $("body").css('overflow-y','hidden')
    });

    $('#confirm').click(function(){
        if(!checkAttr()){
            layer.msg('请完善规格');
            return false;
        }

        var num = Number($('input[name=num]').val());
        if(num <= 0){
            layer.msg('数量不得少于0');return;
        }
        if(buyType == 1){
            //加入购物车
            $.ajax({
                url:"{:Url('Cart/addCart')}",
                data:$('#goodsForm').serialize(),
                type:"post",
                dataType:"json",
                success:function(res){
                    if(res.code > 0){
                        $(".share_window").css('display','none')
                        $(".product_parameter").css('display','none')
                        $(".cate_specification").css('display','none')
                        $("body").css('overflow-y','auto')
                        layer.msg(res.msg);
                    }else{
                        layer.msg(res.msg);
                    }
                }
            })
        }else{
            //立即购买
            $.ajax({
                url:"{:Url('Cart/nowBuy')}",
                data:$('#goodsForm').serialize(),
                type:"post",
                dataType:"json",
                success:function(res){
                    if(res.code > 0){
                        layer.msg(res.msg);
                        setTimeout(function(){
                            window.location.href="{:Url('Order/cart')}";
                        },2000);
                    }else{
                        layer.msg(res.msg);
                    }
                }
            })
        }



    });


    /**
     * 选择规格
     */
    $(".goods_attr").click(function () {
        $(this).parent().find('li').removeClass('specification_this');
        $(this).parent().find('input').prop('checked',false);
        $(this).addClass('specification_this');
        $(this).find('input').prop('checked',true);

        if(!checkAttr()) return false;

        $.ajax({
            url:"{:Url('Goods/getGoodsAttrPriceStore')}",
            data:$('#goodsForm').serialize(),
            type:'post',
            dataType:'json',
            success:function(res){
                if(res.code>0){
                    if(Number("{$isVip}") > 0){
                        $('#goods_price').text(res.result.vip_price);
                    }else{
                        $('#goods_price').text(res.result.price);
                    }
                    $('#attr_str').text(res.result.name);
                    $('#attr_str').parent().show();
                    $('input[name=num]').val(1);
                }else{
                    layer.msg(res.msg);
                }
            }
        })
    });

    /**
     * 验证属性是否有选择
     * @returns {boolean}
     */
    function checkAttr(){
        var flag = true;
        $('.specification_size').each(function(){
            if(!$(this).find('input:checked').val()){
                flag = false;
                return false;
            }
        });
        return flag;
    }

    function getQueueNumber(){
        $.ajax({
            url:"{:Url('Goods/getQueueNumber')}",
            data:{cate_id:"{$goods.cate_id}"},
            type:"post",
            success:function(res){
                if(res > 0){
                    $('#queueNumber').text("{$system_config['queue_number']}".replace('%',res)).show();
                }else{
                    $('#queueNumber').text("").hide()
                }
            }
        })
    }
    getQueueNumber();
    setInterval(function(){
        getQueueNumber();
    },10000);

</script>